<script>
import { defineComponent,computed, getCurrentInstance, ref} from 'vue'
import { useCounterStore } from '../stores';
import { Search } from '@element-plus/icons-vue'
import { useRouter,useRoute } from 'vue-router';
export default defineComponent({
    setup() {
      const store=useCounterStore();
      const router=useRouter();
      const route=useRoute();
      const nickName=ref('')
      const userName=ref('')
      const {proxy}=getCurrentInstance()
      const statuCount=ref(store.statuCount)
      const isCollapse = computed(() => {return store.isCollapse})
      const my=()=>{
        router.push({path:'/my',query:{userName:userName.value}})
      }
      const userDetail=()=>{
        proxy.$http.get(`/system/user/get/${store.userName}`)
        .then((res)=>{
          nickName.value=res.data[0].nickName
          userName.value=res.data[0].userName
        })

      }
      const foldHandle = () => {
          store.setIsCollapse(!isCollapse.value)
      }
      const home=()=>{
        router.push({path:'/homeMain'})
      }
      const declare=()=>{
        router.push({path:'/declare'})
      }
      const message=()=>{
        router.push({path:'/message'})
      }
      const quit=()=>{
        store.token='',
        sessionStorage.removeItem('token')
        sessionStorage.removeItem('userName')
        sessionStorage.removeItem('flag')
        sessionStorage.removeItem('userId')
        router.push({path:'/login'})
      }
      userDetail()
      return{
          isCollapse,
          nickName,
          foldHandle,
          Search,
          my,
          home,
          declare,
          message,
          quit,
          statuCount
      }
    },
})

</script>

<template>
  <el-menu
    :default-active="activeIndex"
    class="el-menu-demo header card-header"
    mode="horizontal"
    
  >
    <div class="box">
      <el-icon color="#409EFC" size="25" @click="foldHandle()" class="hvr-shrink item"> 
       <component :is="isCollapse ? 'Expand' : 'Fold'" />
      </el-icon>
      <el-input
        class="hvr-grow item"
        size="small"
        placeholder="请输入任务或负责人名称"
        :prefix-icon="Search"
      />
    </div>
    <h3 class="hvr-bob" @click="home()">科加斯任务管理</h3>
    <div class="box ">
    
    <el-menu-item index="3" class="hvr-underline-from-center" @click="declare()"><el-icon class="hvr-grow"><Warning /></el-icon></el-menu-item>
    
    <el-menu-item index="4" class="hvr-underline-from-center" @click="message()"><el-icon class="hvr-grow"><el-badge :value="statuCount" class="item"><Bell /></el-badge></el-icon></el-menu-item>
   
    <el-dropdown>
      <span class="hvr-grow">
        {{ nickName }}
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item @click="my()">个人主页</el-dropdown-item>
          <el-dropdown-item @click="quit()">退出</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
  </el-menu>
</template>

<style scoped lang="less">
.header {
border-bottom: 1px solid #c6c6c6;
display: grid;
grid-template-columns: repeat(auto-fit,1fr);
grid-auto-flow: column;
gap: 2em;
justify-content: space-between;
align-items: center;
padding: 0 10px;
.box{
  display: flex;
  flex-wrap:wrap;
  width: 100%;
  align-items: center;
  margin-right: 15px;
}
.box .item{
  flex: 1;
}
}

.el-input{
    width: 200px;
}

:deep(.el-input__wrapper) {
    background-color: transparent;/*覆盖原背景颜色，设置成透明 */
    border-radius: 95px;
    border: 0;
}
</style>
